<template>
  <div class="mian-container">
    <div class="search">
      <el-input
        placeholder="请输入标题查询"
        v-model="searchParam"
        style="width: 200px"
        size="small"
      ></el-input>
      <el-button type="info" plain style="margin-left: 10px" size="small" @click="search"
        >查询</el-button
      >
      <el-button type="warning" plain style="margin-left: 10px" size="small" @click="reset"
        >重置</el-button
      >
    </div>

    <div class="operation">
      <el-button type="primary" plain size="small" @click="handelAdd"
        >新增</el-button
      >
      <el-button type="danger" plain size="small" @click="delBatch"
        >批量删除</el-button
      >
    </div>

    <div class="table">
      <el-table
        :data="tableData"
        stripe
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="title" label="政策标题" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="content" label="政策内容" show-overflow-tooltip>
          <template v-slot="scope">
            <el-button
              type="primary"
              size="mini"
              @click="viewData(scope.row.content)"
              >点击查看</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="time" label="创建时间"> </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template v-slot="scope">
            <el-button
              plain
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              plain
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[5, 10, 20]"
          :page-size="pageSize"
          :total="total"
          layout="total,prev,pager,next"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="助农政策表"
      :visible.sync="formVisiable"
      width="60%"
      :close-on-click-modal="false"
      destory-on-close
    >
      <el-form label-width="100px" :model="form" :rules="rules" ref="formRef">
        <el-form-item prop="title" label="政策标题">
          <el-input
            v-model="form.title"
            auto-complete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item prop="content" label="内容">
          <div id="editor"></div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisiable = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="助农政策"
      :visible.sync="showVisiable"
      width="50%"
      :close-on-click-modal="false"
      destory-on-close
    >
      <div v-html="this.viewContent" class="w-e-text"></div>
    </el-dialog>
  </div>
</template>

<script>
import E from "wangeditor";
import { addPolicy,updatePolicy,reqPolicyInfo,delPolicy,delBatchPolicy,searchPolicy } from "@/api/policy";
import { title } from "@/settings";

export default {
  name: "policy",
  data() {
    return {
      searchParam:"",
      editor: null,
      tableData: [],
      pageNo: 1,
      pageSize: 10,
      total: 0,
      form: {},
      formVisiable: false,
      showVisiable: false,
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
      viewContent: null,
      delBatchData:[]
    };
  },
  methods: {
    // 初始化富文本编辑器
    initWangeditor(content) {
      this.$nextTick(() => {
        this.editor = new E("#editor");
        this.editor.config.placeholder = "请输入内容";
        this.editor.config.uploadFileName = "mypic";
        this.editor.config.uploadImgServer =
          "http://localhost:3000/api/uploadImg2";
        this.editor.create();
        setTimeout(() => {
          this.editor.txt.html(content);
        });
      });
    },
    viewData(content) {
      this.viewContent = content;
      this.showVisiable = true;
    },
    handelAdd() {
      if(this.editor){
        this.editor.destroy()
        this.editor = null
      }
      this.form = {};
      this.formVisiable = true;
      this.initWangeditor("");
    },
    handleEdit(row) {
      if(this.editor){
        this.editor.destroy()
        this.editor = null
      }
      this.form = JSON.parse(JSON.stringify(row));
      this.formVisiable = true;
      this.initWangeditor(this.form.content || "");
    },
    save() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          this.form.content = this.editor.txt.html();
          // 发请求
          if(!this.form._id){
            let result = await addPolicy(this.form)
            if(result.code == 200){
              this.$message.success(result.msg)
              this.formVisiable = false
              this.pageNo = 1
              this.getPolicyInfo(this.pageNo,this.pageSize)
            }else{
              this.$message.error(result.msg)
            }
          }else{
            let result = await updatePolicy(this.form)
            if(result.code == 200){
              this.$message.success(result.msg)
              this.formVisiable = false
              this.pageNo = 1
              this.getPolicyInfo(this.pageNo,this.pageSize)
            }else{
              this.$message.error(result.msg)
            }
          }
        }
      });
    },
    handleSelectionChange(val) {
      let arr = val.map(item => {
        return item._id
      })
      this.delBatchData = arr
    },

    handleCurrentChange(val) {
      this.pageNo = val
      this.getPolicyInfo(this.pageNo,this.pageSize)
    },

    handleSizeChange(val){
      this.pageNo = val
      this.getPolicyInfo(this.pageNo,this.pageSize)
    },

    async search(){
     let result = await searchPolicy(this.searchParam)
     if(result.code == 200) {
      this.$message.success(result.msg)
      this.tableData = result.data
      this.total = result.total
     }else{
      this.$message.error(result.msg)
     }
    },

    reset(){
      this.searchParam = ''
      this.pageNo = 1
      this.getPolicyInfo(this.pageNo,this.pageSize)
    },

    async delBatch() {
      let result = await delBatchPolicy(this.delBatchData)
      if(result.code == 200){
        this.$message.success(result.msg)
        this.pageNo = 1
        this.getPolicyInfo(this.pageNo,this.pageSize)
      }else{
        this.$message.error(result.msg)
      }
    },

    async handleDelete(row){
      let data = {_id:row._id}
      let result = await delPolicy(data)
      if(result.code == 200){
        this.$message.success(result.msg)
        this.pageNo = 1
        this.getPolicyInfo(this.pageNo,this.pageSize)
      }else{
        this.$message.error(result.msg)
      }
    },

    async getPolicyInfo(pageNo,pageSize){
     let result = await reqPolicyInfo(pageNo,pageSize)
     if(result.code == 200){
      this.tableData = result.data
      this.total = result.total
     }else{
      this.$message.error(result.msg)
     }
    }
  },
  mounted(){
    this.getPolicyInfo(this.pageNo,this.pageSize)
  },
  watch: {
    searchParam: function (newVal, oldVal) {
      if (newVal === "") {
        this.pageNo = 1;
        this.getPolicyInfo(this.pageNo, this.pageSize);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.main-container {
  .search {
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  }
  
  .operation {
    margin-top: 5px;
    padding: 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  }
  .table {
    margin-top: 5px;
    padding: 15px 10px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style>
